<div>
    <div class="problem-body">
        <div class="nb">
            <div class="problem-lside">
                <ul>
                    <li>
                        <a href="javascript:void(0);" class="nli">个人中心<b class="arrow"></b></a>
                        <ul class="ulson" style="display: block;">
                            <li><a href="/page.html#/pages/plateform/personalCenter">订单管理</a></li>
                            <li><a href="/pageLR.html#/pages/plateform/cart">购物车</a></li>
                            <li><a href="/page.html#/pages/plateform/address">收货地址</a></li>
                            <li><a href="/page.html#/pages/plateform/personalInfo">个人信息</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

            <div class="problem-rside">
                <div class="probar">
                    <a href="#">个人中心-收货地址</a>
                </div>

                <div class="sh-address">
                    <ul>
                        <li class="add-add">
                            <div class="add-box add-box-center" @click="addAddr()">
                                <a href="javascript:void(0);">
                                    <i class="icon-add-add"></i>
                                    添加新地址
                                </a>
                            </div>
                        </li>
                        <li class="default-add" v-for="(addr, index) in userAddresses">
                            <div class="inner-infos">
                                <div class="addr-hd"><span>{{addr.areaName}}（{{addr.username}}）</span></div>
                                <div class="addr-bd"><span></span><span>{{addr.address}}{{addr.tel}}</span></div>
                                <a title="删除"
                                   style="color: brown;"  @click="deleteAddress(addr)">删除</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="edit-address modbox">
        <div class="edit-box">
            <h3>新增收货信息<i class="close-modbox" v-on:click="closeTips()"></i></h3>
            <div class="edit-form">
                <ul>
                    <li>
                        <label><i>*</i>收货人：</label>
                        <input type="text" id="sh-name" v-model="addAddressInfo.username" maxlength="20" class="s-length">
                    </li>
                    <li>
                        <label><i>*</i>手机号码：</label>
                        <input type="text" id="sh-phone" v-model="addAddressInfo.tel" maxlength="11" class="s-length">
                    </li>
                    <li style="min-height: 25px;">
                        <label style="width: 75px; float: left;"><i>*</i>所在地区：</label>
<!--                        <input type="text" id="sh-district"  v-model="addAddressInfo.areaName" maxlength="30" class="l-length">-->
                        <select  class="layui-input " style="width: 20%;display: inline;background: white;margin-left: 3px"
                                 v-model="addAddressInfo.selectProv" @change="getProv(addAddressInfo.selectProv)">
                            <option value='' disabled selected style='display:none;'>
                                {{vc.i18n('请选择省','register')}}
                            </option>
                            <option v-for="(item,index) in provs" :label="item.areaName" :value="item.areaCode">
                                {{item.areaName}}
                            </option>
                        </select>
                        <select  class="layui-input " style="width: 20%;display: inline;background: white;"
                                 v-model="addAddressInfo.selectCity"
                                 @change="getCity(addAddressInfo.selectCity)">
                            <option value='' disabled selected style='display:none;'>
                                {{vc.i18n('请选择城市','register')}}
                            </option>
                            <option v-for="(item,index) in citys" :label="item.areaName" :value="item.areaCode">
                                {{item.areaName}}
                            </option>
                        </select>
                        <select  class="layui-input " style="width: 20%;display: inline;background: white;"
                                 v-model="addAddressInfo.selectArea"
                                 @change="getArea(addAddressInfo.selectArea)">
                            <option value='' disabled selected style='display:none;'>
                                {{vc.i18n('请选择区县','register')}}
                            </option>
                            <option v-for="(item,index) in areas" :label="item.areaName" :value="item.areaCode">
                                {{item.areaName}}
                            </option>
                        </select>

                    </li>
                    <li style="clear: both;">
                        <label><i>*</i>详细地址：</label>
                        <input type="text" id="sh-address"  v-model="addAddressInfo.address" maxlength="30" class="l-length">
                    </li>
                    <li style="clear: both;">
                        <label>邮政编码：</label>
                        <input type="text" id="sh-postcode"  v-model="addAddressInfo.postalCode" maxlength="6" class="l-length">
                    </li>
                </ul>
                <div class="setting">
                    <input type="checkbox" value="1" id="isdefault"  v-model="addAddressInfo.isDefault" >&nbsp;&nbsp;设为默认地址
                </div>
                <button class="btn-save" id="saveconsignee" @click="saveAddressInfo();">保存</button>
            </div>
        </div>
    </div>

    <div id="mask"></div>
</div>